<template>
  <page-wrap
    back
    hide-tab
    title="非付费用户管理"
    stay-still
    :show-top="true"
    :bg-color="uNavColor"
  >
    <view class="order-manage">
      <view class="tab-bar">
        <view
          :class="[
            currentTopTabIndex == index
              ? 'tab-bar-item-active'
              : 'tab-bar-item',
          ]"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabItemHandleClick(index)"
          >{{ item.name }}
          <view class="msg-num"
            >{{ item.msgNum }}
            <view v-if="item.showRed" class="red-dot"></view> </view
        ></view>
      </view>
      <view class="search-box">
        <u-search
          class="search-tab"
          placeholder="搜索"
          v-model="keyword"
          :showAction="false"
          @blur="searchByCondition"
        ></u-search>
        <view class="filter-btn" @click="showCardTypeList"
          >筛选<u-icon name="arrow-down-fill" size="18"></u-icon
        ></view>
      </view>
      <view class="current-cpn">
        <keep-alive v-if="isRefresh">
          <WillServiceVue
            v-show="currentTopTabIndex == 0"
            :cardType="selectCardType"
            :matchTitle="keywordForSon"
          ></WillServiceVue>
          <WillEstimateVue
            v-show="currentTopTabIndex == 1"
            :cardType="selectCardType"
            :matchTitle="keywordForSon"
          ></WillEstimateVue>
          <FinishEstimateVue
            v-show="currentTopTabIndex == 2"
            :cardType="selectCardType"
            :matchTitle="keywordForSon"
          ></FinishEstimateVue>
        </keep-alive>
      </view>
    </view>
    <u-picker
      v-model="showCardTypeColumns"
      mode="selector"
      :range="cardTypeColumns"
      range-key="cardName"
      :default-selector="defaultSelector"
      @confirm="confirmPicker"
    ></u-picker>
  </page-wrap>
</template>

<script>
import {
  getConsultantBindPersonList,
  getConsultantNoticeCount,
  selectCardTypeList,
} from "@/api/modules/orderManage.js";
import FinishEstimateVue from "./estimate/finishEstimate.vue";
import WillEstimateVue from "./estimate/willEstimate.vue";
import WillServiceVue from "./estimate/willService.vue";
export default {
  components: {
    FinishEstimateVue,
    WillEstimateVue,
    WillServiceVue,
  },
  data() {
    return {
      defaultSelector: [0],
      selectCardType: "", // 筛选出来的项目
      cardTypeColumns: [
        {
          cardName: "全部",
          cardType: "",
        },
      ],
      showCardTypeColumns: false,
      keywordForSon: "",
      keyword: "", //搜索栏关键词
      uNavColor: "#F7F8FA",
      isRefresh: true,
      currentTopTabIndex: 0,
      tabList: [
        {
          name: "待服务",
          msgNum: 20,
          showRed: false,
        },
        {
          name: "待评价",
          msgNum: 10,
          showRed: false,
        },
        {
          name: "已评价",
          msgNum: 10,
          showRed: false,
        },
      ],
      activeItemStyle: {
        position: "relative",
        fontSize: "32rpx",
        fontWeight: 600,
        color: "#333333",
      },
    };
  },
  methods: {
    async selectCardTypeListFn() {
      const params = {
        pageNo: 1,
        pageSize: 999,
      };
      const res = await selectCardTypeList(params);
      if (res.code == 200) {
        this.cardTypeColumns = this.cardTypeColumns.concat(res.data);
      }
    },
    confirmPicker(e) {
      console.log("这里是index", e[0]);
      this.selectCardType = this.cardTypeColumns[e[0]].cardType;
      this.defaultSelector = [e[0]];
    },
    showCardTypeList() {
      this.showCardTypeColumns = true;
    },
    searchByCondition() {
      console.log("这里失去了焦点");
      this.keywordForSon = this.keyword;
    },
    tabItemHandleClick(item) {
      console.log("这里触发了tabItemHandleClick");
      this.defaultSelector = [0];
      this.selectCardType = "";
      this.isRefresh = false;
      this.keyword = "";
      this.keywordForSon = "";
      this.cardType = "";

      this.$nextTick(() => {
        this.isRefresh = true;
        this.currentTopTabIndex = item;
      });
    },
    async getConsultantBindPersonListFn(searchType) {
      const params = {
        searchType: searchType,
        consultantId: uni.getStorageSync("person-id").slice(2),
      };
      const res = await getConsultantBindPersonList(params);
      if (res.code == 200) {
        switch (searchType) {
          case 10:
            this.tabList[0].msgNum = res.pageparam.sums;
            res.data.forEach((item) => {
              if (item.noticeStatus == "2") {
                this.tabList[0].showRed = true;
              }
            });
            break;
          case 20:
            this.tabList[1].msgNum = res.pageparam.sums;
            res.data.forEach((item) => {
              if (item.noticeStatus == "2") {
                this.tabList[1].showRed = true;
              }
            });
            break;
          case 30:
            this.tabList[2].msgNum = res.pageparam.sums;
            res.data.forEach((item) => {
              if (item.noticeStatus == "2") {
                this.tabList[2].showRed = true;
              }
            });
            break;
          default:
            break;
        }
      }
    },
    async getConsultantNoticeCountFn() {
      const params = {
        consultantId: uni.getStorageSync("person-id").slice(2),
      };
      const res = await getConsultantNoticeCount(params);
      if (res.code == 200) {
        console.log("数量", res);
      }
    },
  },
  created() {
    this.getConsultantBindPersonListFn(10);
    this.getConsultantBindPersonListFn(20);
    this.getConsultantBindPersonListFn(30);
    this.selectCardTypeListFn();
  },
  onShow() {
    // this.currentTopTabIndex = 0;
    // this.getConsultantBindPersonListFn(10);
    // this.getConsultantBindPersonListFn(20);
    // this.getConsultantBindPersonListFn(30);
    uni.$on("recordCpnName", (e) => {
      switch (e) {
        case "willService":
          this.currentTopTabIndex = 0;
          break;
        case "willEstimate":
          this.currentTopTabIndex = 1;
          break;
        case "finishEstimate":
          this.currentTopTabIndex = 2;
          break;
        default:
          break;
      }
    });
    uni.$on("refreshEstimate", (e) => {
      console.log("这里进入refreshEstimate刷新");
      this.tabItemHandleClick(1);
      // this.currentTopTabIndex = 1;
    });
  },
  onUnload() {
    console.log("这里进入了unload");
  },
  onHide() {
    console.log("这里进入了onHide周期");
    this.currentTopTabIndex = -1;
  },
};
</script>

<style lang="scss" scoped>
.order-manage {
  .tab-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 32rpx;
    margin: 38rpx 0 24rpx 0;
    .tab-bar-item,
    .tab-bar-item-active {
      width: 150rpx;
      height: 46rpx;
      margin-right: 72rpx;
      font-family: PingFangSC, PingFang SC;

      font-size: 32rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      // justify-content: space-between;
      .msg-num {
        font-size: 26rpx;
        margin-left: 10rpx;
        position: relative;
        .red-dot {
          position: absolute;
          width: 12rpx;
          height: 12rpx;
          background: #f75a3e;
          border-radius: 50%;
          right: -12rpx;
          top: -12rpx;
        }
      }
    }
    .tab-bar-item {
      color: #666666;
      font-weight: 400;
    }
    .tab-bar-item-active {
      color: #333333;
      font-weight: 800;
      position: relative;
      &::after {
        content: "";
        width: 78rpx;
        height: 12rpx;
        background: linear-gradient(
          270deg,
          rgba(248, 219, 215, 0.2) 0%,
          #f75a3e 100%
        );
        border-radius: 7rpx;
        position: absolute;
        left: 6rpx;
        top: 38rpx;
      }
    }
  }
  .search-box {
    width: 716rpx;
    margin: 10rpx auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .search-tab {
      width: 85%;
    }
    .filter-btn {
      width: 120rpx;
      height: 62rpx;
      background: #f1f1f1;
      border-radius: 4rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      background-color: #f2f2f2;
      margin-left: 10rpx;
    }
  }
  .current-cpn {
    height: calc(100vh - 430rpx);
    overflow-y: scroll;
  }
}
</style>
